/**
 * @file hoc.jsx.
 * @author liaoxuezhi@baidu.com
 */
/* eslint fecs-indent: [0, "space", 2, 2] */

import * as React from 'react';
import {
  Component,
  PropTypes
} from "react";
import {findDOMNode} from 'react-dom';
import * as assign from 'object-assign';
import * as cx from 'classnames';
import {filter, renderChildren, render} from '../renderer';
import {Overlay} from 'react-bootstrap';
import SimplePopOver from '../../widgets/simple-popover/simple-popover';
import {getDialogContainer} from '../../util/helper';

import '../form/panel-form';

export const Enhance = ComposedComponent => class AttatchPopOverAble extends Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      open: false
    };

    this.open = this.open.bind(this);
    this.close = this.close.bind(this);
    this.getOffset = this.getOffset.bind(this);
  }

  open() {
    this.props.onRequestHighlight && this.props.onRequestHighlight(this.props.item || this.props.data);

    this.setState({
      open: true
    });
  }

  close() {
    this.setState({
      open: false
    });
  }

  getOffset(box, current) {
    const dom = findDOMNode(this).getBoundingClientRect();
    const windowWidth = window.innerWidth;
    let x =  (box.width - dom.width) / 2;

    // 右边放不下,放左边.
    if (current.x + x + box.width > windowWidth) {
      x = (dom.width - box.width) / 2;
    }

    return {
      x: x - 1,
      y: -dom.height + 1
    }
  }

  normalizePopOver(popOver) {
    const {
      label,
      value,
    } = this.props;

    if (popOver === true) {
      popOver = {};
    }

    return assign({
      title: label,
      body: value,
      mode: 'popOver',
      trigger: 'click'
    }, popOver);
  }

  render() {
    let {
      className,
      popOver,
      popOverAble,
      item,
      $path,
      affix,
      locals,
      prefix,
      sendNotify
    } = this.props;

    const props = {};

    if (popOver && popOverAble !== false) {
      const open = this.state.open;
      popOver = this.normalizePopOver(popOver);
      props.className = cx(className, 'td-popover', open ? 'td-popover-active' : null);

      if (!open && !affix) {
        props.affix = <a key="popOver-toggle" className="btn btn-sm" onClick={this.open} ><i className="fa fa-search-plus text-muted fa-lg" /></a>;
      }

      if (open) {
        if (popOver.mode === 'dialog') {
          props.prefix = render(`${$path}/dialog`, popOver, {
            data: item,
            locals,
            sendNotify,
            onClose: this.close,
            confirmMode: false,
            key: 'dialog'
          });
        } else {
          const sharedProps = {
            container: getDialogContainer(),
            show: true,
            placement: 'bottom',
            target: () => findDOMNode(this),
            rootClose: true,
            onHide: this.close,
            key: 'overlay'
          };

          props.prefix = (
            <Overlay {...sharedProps}>
              <SimplePopOver
                className="field-popover"
                offset={this.getOffset}
              >
                <div
                  className={cx('panel', popOver.className || 'panel-default no-border m-b-none')}
                  onMouseLeave={popOver.trigger === 'hover' ? this.close : null}
                >
                  {popOver.title ? (
                      <div className="panel-heading">{popOver.title}</div>
                    ) : null}
                  <div className="panel-body clear">
                    {renderChildren($path, popOver.body, {data: item})}
                  </div>
                </div>
              </SimplePopOver>
            </Overlay>
          );
        }
      }
    }

    return (
      <ComposedComponent {...this.props} {...props} />
    )
  }
};

export default Enhance;
